<template>
  <div class="data-display">
    <h1>环境数据监控</h1>
    
    <!-- 实时视频流 -->
    <div class="video-container">
      <img :src="imageUrl" alt="实时监控画面" class="video-frame">
    </div>

    <!-- 实时数据展示 -->
    <div class="data-container">
      <div class="data-item temperature">
        <h2>温度: {{ temperature }}°C</h2>
      </div>
      <div class="data-item humidity">
        <h2>湿度: {{ humidity }}%</h2>
      </div>
    </div>

    <!-- 可视化图表 -->
    <div class="charts-container">
      <div class="chart-wrapper">

        <v-chart 
          :option="tempChartOption" 
          style="height: 300px;"
          autoresize
        />
      </div>
      <div class="chart-wrapper">
        <v-chart
          :option="humiChartOption"
          style="height: 300px;"
          autoresize
        />
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { use } from 'echarts/core';
import { LineChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import VChart from 'vue-echarts';

use([
  LineChart,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  CanvasRenderer
]);

export default {
  components: { VChart },
  data() {
    return {
      temperature: 'N/A',
      humidity: 'N/A',
      imageUrl: '1.jpg',
      refreshInterval: 150,
      
      // 图表数据
      tempData: [],
      humiData: [],
      timeData: [],
      tempChartOption: {
        title: { text: '温度变化趋势', left: 'center' },
        tooltip: { trigger: 'axis' },
        xAxis: {
          type: 'category',
          data: [],
          name: '时间',
          axisLabel: { rotate: 45 }
        },
        yAxis: { name: '温度 (°C)' },
        series: [{}]
      },
      humiChartOption: {
        title: { text: '湿度变化趋势', left: 'center' },
        tooltip: { trigger: 'axis' },
        xAxis: {
          type: 'category',
          data: [],
          name: '时间',
          axisLabel: { rotate: 45 }
        },
        yAxis: { name: '湿度 (%)' },
        series: [{}]
      }
    };
  },
  mounted() {
    this.fetchData();
    this.startVideoStream();
    setInterval(this.fetchData, 2000);
    setTimeout(this.updateChart, 2000);
    setInterval(this.updateChart, 15000);
  },
  methods: {
    updateChart() {
      this.updateChartData(this.temperature, this.humidity);
    },
    updateChartData(newTemp, newHumi) {
      const time = new Date().toLocaleTimeString('zh', { 
        hour: '2-digit', 
        minute: '2-digit',
        second: '2-digit'
      });

      // 更新温度数据
      this.tempData.push(newTemp);
      this.timeData.push(time);
      if (this.tempData.length > 20) {
        this.tempData.shift();
        this.timeData.shift();
      }

      // 更新湿度数据
      this.humiData.push(newHumi);
      if (this.humiData.length > 20) {
        this.humiData.shift();
      }

      // 更新图表配置
      this.tempChartOption.series[0] = {
        name: '温度',
        type: 'line',
        smooth: true,
        data: [...this.tempData],
        itemStyle: { color: '#ff6384' },
        areaStyle: { color: 'rgba(255, 99, 132, 0.2)' }
      };
      this.tempChartOption.xAxis.data = [...this.timeData];

      this.humiChartOption.series[0] = {
        name: '湿度',
        type: 'line',
        smooth: true,
        data: [...this.humiData],
        itemStyle: { color: '#36a2eb' },
        areaStyle: { color: 'rgba(54, 162, 235, 0.2)' }
      };
      this.humiChartOption.xAxis.data = [...this.timeData];
    },
    fetchData() {
      axios.get('http://www.rose2u.asia:9999/temphumi')
        .then(response => {
          if (response.data) {
            this.temperature = response.data.temp;
            this.humidity = response.data.humi;
          }
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        });
    },
    startVideoStream() {
      const updateFrame = () => {
        axios.get('http://www.rose2u.asia:8100/get-latest-frame')
          .then(response => {
            if (response.data?.frame) {
              this.imageUrl = 'data:image/jpeg;base64,' + response.data.frame;
            }
          })
          .catch(error => {
            console.error('Error fetching video frame:', error);
          });
      };
      updateFrame();
      setInterval(updateFrame, this.refreshInterval);
    }
  }
};
</script>

<style scoped>
.data-display {
  text-align: center;
  padding: 20px;
  max-width: 750px;
  margin: 0 auto;
}

.video-container {
  margin: 20px 0;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.video-frame {
  width: 100%;
  max-width: 750px;
  height: auto;
  object-fit: contain;
}

.data-container {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.data-item {
  padding: 20px 40px;
  background: #f8f9fa;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  min-width: 200px;
}

.data-item.temperature {
  background: #fff0f3;
  border: 2px solid #ff6384;
}

.data-item.humidity {
  background: #f0f8ff;
  border: 2px solid #36a2eb;
}

.charts-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 30px;
}

.chart-wrapper {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

h1 {
  color: #2c3e50;
  margin-bottom: 30px;
  font-size: 2.2rem;
}

h2, h3 {
  color: #34495e;
  margin: 0;
  font-size: 1.4rem;
}

@media (max-width: 768px) {
  .video-container {
    margin: 10px -15px;
    border-radius: 0;
  }
  
  .data-container {
    gap: 15px;
  }
  
  .data-item {
    width: 100%;
    padding: 15px;
  }

  .charts-container {
    grid-template-columns: 1fr;
  }
  
  .chart-wrapper {
    height: 250px;
  }
}
</style>